﻿<script src="~/lib/vue/dist/vue.global.js"></script>
<script src="~/lib/axios/dist/axios.js"></script>
<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/dist/index.full.js"></script>
<div id="app">
    <el-button type="primary" v-on:click="xzOk()">新增</el-button>
    <el-table :data="data" style="width: 100%">
        <el-table-column prop="ftkId" label="编号" width="130"></el-table-column>
        <el-table-column prop="firstKindName" label="I级机构名称" width="130"></el-table-column>
        <el-table-column prop="secondKindName" label="II级机构名称" width="130"></el-table-column>
        <el-table-column prop="secondKindId" label="II级机构编号" width="130"></el-table-column>
        <el-table-column prop="thirdKindName" label="III级机构名称" width="130"></el-table-column>
        <el-table-column prop="secondSaleId" label="销售责任人编号	" width="130"></el-table-column>
        <el-table-column prop="thirdKindIsRetail" label="是否为零食店	" width="130"></el-table-column>

        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" v-on:click="handleEdit(scope.row)">
                    修改
                </el-button>
                <el-button size="small"
                           type="danger"
                           v-on:click="handleDelete(scope.row.ftkId)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible"
               title="表的修改"
               width="500">
        <span>
            <el-form ref="uruleFormRef" :model="uform" :rules="urules" label-width="auto" style="max-width: 600px">
                <el-form-item label="编号" prop="ftkId">
                    <el-input v-model="uform.FtkId" />
                </el-form-item>
                <el-form-item label="I级机构名称" prop="firstKindName">
                    <el-select v-model="uform.FirstKindName" placeholder="请选择I级机构名称">
                        <el-option label="牛牛集团" value="牛牛集团"></el-option>
                        <el-option label="花花电子集团" value="花花电子集团"></el-option>
                        <el-option label="等等便利集团" value="等等便利集团"></el-option>
                        <el-option label="当当便利集团" value="当当便利集团"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="II级机构名称" prop="secondKindName">
                    <el-select v-model="uform.SecondKindName" placeholder="请选择II级机构名称">
                        <el-option label="哈哈" value="哈哈"></el-option>
                        <el-option label="呜呜" value="呜呜"></el-option>
                        <el-option label="嘻嘻" value="嘻嘻"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="II级机构编号	" prop="secondKindId">
                    <el-input v-model="uform.SecondKindId" />
                </el-form-item>
                <el-form-item label="III级机构名称	" prop="thirdKindName">
                    <el-input v-model="uform.ThirdKindName" />
                </el-form-item>
                <el-form-item label="销售责任人编号" prop="secondSaleId">
                    <el-input v-model="uform.SecondSaleId" />
                </el-form-item>
                <el-form-item label="是否为零食店" prop="thirdKindIsRetail">
                    <el-select v-model="uform.ThirdKindIsRetail">
                        <el-option label="是" :value="1"></el-option>
                        <el-option label="否" :value="2"></el-option>
                    </el-select>
                </el-form-item>

                <el-button v-on:click="dialogVisible = false">取消</el-button>
                <el-button type="primary" v-on:click="upOk()">
                    修改
                </el-button>
                </el-form-item>
            </el-form>
        </span>
    </el-dialog>


    <el-dialog v-model="TjdialogVisible"
               title="表的添加"
               width="500">
        <span>
            <el-form ref="TjuruleFormRef" :model="Tjuform" :rules="urules" label-width="auto" style="max-width: 600px">
                <el-form-item label="I级机构名称" prop="firstKindName">
                    <el-select v-model="Tjuform.FirstKindName" placeholder="请选择I级机构名称">
                        <el-option label="牛牛集团" value="牛牛集团"></el-option>
                        <el-option label="花花电子集团" value="花花电子集团"></el-option>
                        <el-option label="等等便利集团" value="等等便利集团"></el-option>
                        <el-option label="当当便利集团" value="当当便利集团"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="II级机构名称" prop="secondKindName">
                    <el-select v-model="Tjuform.SecondKindName" placeholder="请选择II级机构名称">
                       @*  <el-option label="二级机构" value="二级机构"></el-option>
                        <el-option label="三级机构" value="三级机构"></el-option>
                        <el-option label="一级机构" value="一级机构"></el-option> *@
                        <el-option label="哈哈" value="哈哈"></el-option>
                        <el-option label="呜呜" value="呜呜"></el-option>
                        <el-option label="嘻嘻" value="嘻嘻"></el-option>
                        <el-option label="康康" value="康康"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="II级机构编号	" prop="secondKindId">
                    <el-input v-model="Tjuform.SecondKindId" />
                </el-form-item>
                <el-form-item label="III级机构名称	" prop="thirdKindName">
                    <el-input v-model="Tjuform.ThirdKindName" />
                </el-form-item>
                <el-form-item label="销售责任人编号" prop="secondSaleId">
                    <el-input v-model="Tjuform.SecondSaleId" />
                </el-form-item>
                <el-form-item label="是否为零食店" prop="thirdKindIsRetail">
                    <el-select v-model="Tjuform.ThirdKindIsRetail">
                        <el-option label="是" :value="1"></el-option>
                        <el-option label="否" :value="2"></el-option>
                    </el-select>
                </el-form-item>

                <el-button v-on:click="TjdialogVisible = false">取消</el-button>
                <el-button type="primary" v-on:click="TjOk()">
                    确定
                </el-button>
                </el-form-item>
            </el-form>
        </span>
    </el-dialog>

    @* @Html.Partial("Index4");重用页面前台 *@

</div>
<script type="text/javascript">
    const { createApp, ref, reactive } = Vue
    var app = createApp({
        setup() {

            let m = ref(1);
            let data = ref([]);
            let dialogVisible = ref(false);
            const uruleFormRef = ref(null);

            let TjdialogVisible = ref(false);
            const TjuruleFormRef = ref(null);

            const uform = reactive({
                FtkId: '',
                FirstKindName: '',
                SecondKindName: '',
                SecondKindId: '',
                ThirdKindName: '',
                SecondSaleId: '',
                ThirdKindIsRetail: ''
            })

            const Tjuform = reactive({
                FirstKindName: '',
                SecondKindName: '',
                SecondKindId: '',
                ThirdKindName: '',
                SecondSaleId: '',
                ThirdKindIsRetail: 1
            })

            const urules = reactive({
                FirstKindName: [
                    { required: true, message: '请输入名字', trigger: 'blur' },
                ],
            })

            //定义
            function fill() {
                axios.get('/Home/SelectCftk')
                    .then(res => {
                        res.data.forEach(item => {
                            item.thirdKindIsRetail = item.thirdKindIsRetail === 1 ? '是' : '否';
                        });
                        data.value = res.data;
                    })
                    .catch(err => {
                        console.info(err);
                    });
            }


            //修改显示
            function handleEdit(row) {
                dialogVisible.value = true;
                uform.FtkId = row.ftkId;
                uform.FirstKindName = row.firstKindName;
                uform.SecondKindName = row.secondKindName;
                uform.SecondKindId = row.secondKindId;
                uform.ThirdKindName = row.thirdKindName;
                uform.SecondSaleId = row.secondSaleId;
                uform.ThirdKindIsRetail = row.thirdKindIsRetail === '是' ? 1 : 2; // 确保绑定到数字

            }
            //修改提交
            function upOk() {
                uruleFormRef.value.validate((valid, fields) => {
                    if (valid) {
                        axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
                        axios.post('/Home/CFTKUpdate', {
                            FtkId: uform.FtkId,
                            FirstKindName: uform.FirstKindName,
                            SecondKindName: uform.SecondKindName,
                            SecondKindId: uform.SecondKindId,
                            ThirdKindName: uform.ThirdKindName,
                            SecondSaleId: uform.SecondSaleId,
                            ThirdKindIsRetail: uform.ThirdKindIsRetail
                        }).then(res => {

                            if (res.data > 0) {
                                alert("修改成功！")
                                fill();
                                dialogVisible.value = false;

                            }
                        }).catch(err => {
                            console.log(err);
                        })
                    } else {
                        console.log('error submit!', fields)
                    }
                })
            }

            //删除
            function handleDelete(ftkId) {
                if (confirm("确认删除编号" + ftkId + "吗？")) {
                    axios.delete('/Home/CFTKDelete/' + ftkId)
                        .then(res => {
                            if (res.data > 0) {
                                // 删除成功后重新填充数据列表
                                alert("删除成功！")
                                fill();
                            } else {
                                console.log("删除失败或未找到匹配项");
                            }
                        })
                        .catch(err => {
                            console.error("删除请求失败", err);
                        });
                }
            }


            //打开添加模态框
            function xzOk() {
                TjdialogVisible.value = true;
            }

            //添加
            function TjOk() {
                TjuruleFormRef.value.validate((valid, fields) => {
                    if (valid) {
                        axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
                        axios.post('/Home/CFTKAdd', {
                            FirstKindName: Tjuform.FirstKindName,
                            SecondKindName: Tjuform.SecondKindName,
                            SecondKindId: Tjuform.SecondKindId,
                            ThirdKindName: Tjuform.ThirdKindName,
                            SecondSaleId: Tjuform.SecondSaleId,
                            ThirdKindIsRetail: Tjuform.ThirdKindIsRetail
                        }).then(res => {

                            if (res.data > 0) {
                                alert("添加成功！")
                                fill();
                                TjdialogVisible.value = false;
                                Tjuform.FirstKindName = "";
                                Tjuform.SecondKindName = "";
                                Tjuform.SecondKindId = "";
                                Tjuform.ThirdKindName = "";
                                Tjuform.SecondSaleId = "";
                                Tjuform.ThirdKindIsRetail = "";
                            }
                        }).catch(err => {
                            console.log(err);
                        })
                    } else {
                        console.log('error submit!', fields)
                    }
                })
            }




            //调用
            fill();
            return {
                m,
                data,
                handleEdit,
                handleDelete,
                dialogVisible,
                uform,
                urules,
                upOk,
                uruleFormRef,
                ref,
                xzOk,
                TjdialogVisible,
                TjuruleFormRef,
                Tjuform,
                TjOk
            }
        }
    });
    app.use(ElementPlus)
    app.mount('#app')

</script>
